<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <div class="col-xs-4 col-sm-8">
            
            <div class="form-group">
                <label class="control-label col-xs-4 col-sm-2">{:__('Agent')}:</label>
                <div class="col-sm-2">
                    <select id="c-agent"   class="form-control" name="channel" >
                        <option value="" >{:__('Whole')}</option>
                        {foreach name="adminList" id="item"}
                        <option value="{$item}">{$item}</option>
                        {/foreach}
                    </select>
                </div>

                <label class="control-label col-xs-4 col-sm-2">{:__('Spiderrobotuser')}:</label>
                <div class="col-sm-2">
                    <select id="c-robot"   class="form-control" name="channel" >

                    </select>
                </div>
               
                <label class="control-label col-xs-2 col-sm-2">{:__('Gender')}:</label>
                <div class="col-sm-2">
                    <select id="c-gender"   class="form-control" name="gender" >
                            <option value="">{:__('Unlimited')}</option>
                            <option value="0">{:__('Unknown')}</option>
                            <option value="1">{:__('Male')}</option>
                            <option value="2">{:__('Female')}</option>
                            <option value="3">{:__('Neutral')}</option>
                    </select>
                </div>
               
            </div>
            <div class="form-group">
               
                <!--   added by zht --> 
                <label class="control-label col-xs-2 col-sm-2">{:__('Checkstatus')}:</label>
                <div class="col-sm-2">
                    <select id="c-checkStatus"   class="form-control" name="checkStatus" >
                            <option value="" >{:__('Whole')}</option>
                            <option value="-1" >{:__('Not verified')}</option>
                            <option value="0" >{:__('Verification failed')}</option>
                            <option value="1" >{:__('Verified')}</option>
                    </select>
                </div>
                
                <label class="control-label col-xs-2 col-sm-2">{:__('ManualGrade')}:</label>
                <div class="col-sm-2">
                    <select id="c-grade"   class="form-control" name="grade" >
                            <option value="" >{:__('Whole')}</option>
                            <option value="-1" >{:__('GradeUnRated')}</option>
                            <option value="0" >{:__('GradeAbandon')}</option>
                            <option value="1" >{:__('GradeQualified')}</option>
                            <option value="2" >{:__('GradeExcellent')}</option>
                    </select>
                </div>

                <label class="control-label col-xs-4 col-sm-2">{:__('SpiderType')}:</label>
                <div class="col-sm-2">
                    <select id="c-spiderType"   class="form-control" name="spiderType" >
                        <option value="" >{:__('Whole')}</option>
                        <option value="0" >{:__('SpiderByLiveroom')}</option>
                        <option value="1" >{:__('SpiderByVideo')}</option>
                        <option value="2" >{:__('SpiderByPC')}</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
               
                <label class="control-label col-xs-4 col-sm-2">{:__('Region')}</label>
                <div class="col-xs-4 col-sm-2">
                        <input id="c-region" class="form-control" name="region" type="text">
                 </div>
               
                <div class="col-sm-2">
                    <a href="javascript:;" id="btn-check" class="btn btn-success btn-check"  >{:__('Inquire')}</a>
                </div>
            </div>
           
            <table class="table table-striped table-bordered table-hover table-nowrap">
                <thead><td>{:__('Livestreameruser')}</td><td>{:__('Gender')}</td><td>{:__('Age')}</td><td>{:__('Facelevel')}</td><td>{:__('Language')}</td><td>{:__('Region')}</td><td>{:__('Videonum')}</td><td>{:__('Contact type')}</td><td>{:__('Checkstatus')}</td><td>{:__('Checkremark')}</td><td>{:__('ManualGrade')}</td></thead>
                <tbody id="zhubolist">
                    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                </tbody>
            </table>
            <style type="text/css">
                #zhubolist .kts{cursor: pointer;}
                #zhubolist .hover{background: purple; color: #fff;}
            </style>
            <div class="form-group">
                <div class="col-xs-12 col-sm-12 form-group">
                    <div class="col-xs-6 col-sm-2">
                        <select id="c-order"   class="form-control" name="order" >
                                <option value="" >{:__('Unlimited')}</option>
                                <option value="fansNum" >{:__('Followers')}</option>
                                <option value="videoNum" >{:__('Number of works')}</option>
                                <option value="newVideoTime" >{:__('Time of the latest work')}</option>
                        </select>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                        <a href="javascript:;" class="btn btn-primary btn-check"  >{:__('sort')}</a>
                    </div>
                    <div class="col-xs-6 col-sm-4">
                        <a href="javascript:;" data-page="0" class="btn btn-danger prev" disabled>{:__('Previous page')}</a>
                    </div>
                    <div class="col-xs-6 col-sm-4">
                        <a href="javascript:;" data-page="1" class="btn btn-danger next" disabled>{:__('Next page')}</a>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 form-group" id="videolist">
                    <div class="col-xs-8 col-sm-3">
                        <img class="img-responsive" src="{$admin.avatar|cdnurl|htmlentities}" alt="">
                    </div>
                    <div class="col-xs-8 col-sm-3">
                        <img class="img-responsive" src="{$admin.avatar|cdnurl|htmlentities}" alt="">
                    </div>
                    <div class="col-xs-8 col-sm-3">
                        <img class="img-responsive" src="{$admin.avatar|cdnurl|htmlentities}" alt="">
                    </div>
                    <div class="col-xs-8 col-sm-3">
                        <img class="img-responsive" src="{$admin.avatar|cdnurl|htmlentities}" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="videos"></div>
        <div class="mask"></div>
        <style type="text/css">
            #videolist img{width: 100%;height: 250px;cursor: pointer;}
            .videos{display: none;position: fixed;
            left: 50%;
            top: 50%;
            max-width: 480px;
            max-height: 720px;
            transform: translate(-50%, -50%);
            width: 50%;
            height: 50%;
            z-index: 2;
            border-radius: 0.5rem;
            transition: all 0.4s ease-in-out 0s;}
            .mask{
                display: none;
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1;
                background-color: #000;
                opacity: .5;
            }
        </style>
        <div class="col-xs-8 col-sm-4">
            <div class="box-body box-profile">
               <div class="profile-avatar-container">
                    <div class="col-xs-12 col-sm-12">
                        <div class="col-xs-8 col-sm-4">
                            <img class="profile-user-img img-responsive img-circle" id="avatar" src="{$admin.avatar|cdnurl|htmlentities}" alt="">
                        </div>
                        <div class="col-xs-8 col-sm-8">
                            <input type="hidden" id="livestreamerUser" name="livestreamerUser" value="">
                            <div class="col-xs-8 col-sm-12"><span id="nickname">{:__('User nickname')}</span></div>
                            <div class="col-xs-8 col-sm-12"><span id="followNum"></span>{:__('Follow')} <span id="fansNum"></span>{:__('Followers')} <span id="likesNum"></span>{:__('Likes')}</div>

                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 form-group">
                        <div class="col-xs-8 col-sm-12" id="signature" style="min-height: 22rem;">{:__('Personal profie')}</div>
                    </div>
                    <!-- <div class="col-xs-12 col-sm-12 form-group">
                        <label class="control-label col-xs-12 col-sm-4">{:__('颜值打分数')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <input class="form-control" readonly="true" id="faceLevel" name="faceLevel" type="text">
                        </div>
                    </div> -->
                    <!-- <div class="col-xs-12 col-sm-12 form-group">
                        <label class="control-label col-xs-12 col-sm-4">{:__('短视频作品数')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <input class="form-control" id="videoNum" readonly="true" type="text">
                        </div>
                    </div> -->
                    <div class="col-xs-12 col-sm-12 form-group">
                        <label class="control-label col-xs-12 col-sm-4">{:__('Time of the latest work')}:</label>
                    <!-- <div class="col-xs-12 col-sm-12 form-group">
                        <label class="control-label col-xs-12 col-sm-4">{:__('最新作品时间')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <input class="form-control" id="newVideoTime" readonly="true" type="text">
                        </div>
                    </div> -->
                    <!-- <div class="col-xs-12 col-sm-12 form-group">
                        <label class="control-label col-xs-12 col-sm-4">{:__('首条作品时间')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <input class="form-control" id="firstVideoTime" readonly="true" type="text">
                        </div>
                    </div> -->

                    <div class="col-xs-12 col-sm-12 form-group">
                        <div class="col-sm-4">
                            <div class=" col-sm-8">{:__('GradeExcellent')}:</div>
                            <div class=" col-sm-3">
                                <input id="c-grade" class="" checked name="grade" value="2" type="radio">
                            </div>
                        </div>
                        <div class=" col-sm-4">
                            <div class=" col-sm-8">{:__('GradeQualified')}:</div>
                            <div class=" col-sm-3">
                                <input id="c-grade" class="" name="grade" value="1" type="radio">
                            </div>
                        </div>
                        <div class=" col-sm-4">
                            <div class=" col-sm-8">{:__('GradeAbandon')}:</div>
                            <div class=" col-sm-3">
                                <input id="c-grade" class="" name="grade" value="0" type="radio">
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 form-group">
                        <label class="control-label col-xs-12 col-sm-12" style="text-align: left;">{:__('Reason for abandonment')}:</label>

                    </div>
                    <div class="col-xs-12 col-sm-12 form-group">
                        <div class="col-xs-12 col-sm-12">
                            <select id="c-checkRemark"   class="form-control" name="checkRemark" >
                                    <option value="地区不符">{:__('Unsupported region')}</option>
                                    <option value="电商主播">{:__('E-commerce anchor')}</option>
                                    <option value="颜值太低">{:__('Low level of appearance')}</option>
                                    <option value="其他原因">{:__('Other reason')}</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 form-group">
                        <label class="control-label col-xs-12 col-sm-4">{:__('Contact type')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <select id="c-contact_type"   class="form-control" name="contact_type" >
                                    <option value="0" >无</option>
                                    <option value="1" >instagram</option>
                                    <option value="2" >facebook</option>
                                    <option value="3" >whatsapp</option>
                                    <option value="4" >wechat</option>
                            </select>
                        </div>
                    </div>
                    
                    
                    <div class="col-xs-12 col-sm-12 form-group">
                        <div class="col-xs-12 col-sm-12">
                            <input id="c-contact" class="form-control" name="contact" type="text">
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 form-group">
                    <a class="btn btn-primary btn-embossed btn-save">{:__('Save & Next')}</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
</form>
